<template>
    <!-- 试题列表 -->
    <template v-if="questionList && questionList.length" v-for="(item, index) of questionList">
        <el-card class="card-item">
            <template #header>
                <div class="card-item-header">
                    <div class="card-item-header-first">
                        {{ index + 1 }}.{{ item.type }}&nbsp;<span style="color: blue">（&nbsp;{{ item.score }}&nbsp;分&nbsp;）</span>
                    </div>
                    <div v-if="item?.tag">
                        <lemon-tag :value="item.tag" size="small" />
                    </div>
                </div>
            </template>
            <template v-if="item.type === '单选题'">
                <p class="card-item-title">{{ item.question }}</p>
                <el-radio-group v-model="item.submitAnswer[0]" @change="onChange(item)">
                    <el-radio :value="key" size="large" v-for="(value, key) in item.options" :style="style">
                        <span v-if="status === 2 || status === 3">{{ key }}.{{ value }}</span>
                        <span v-else :style="singleSelectStyle(item, String(key))"> {{ key }}.{{ value }} </span>
                    </el-radio>
                </el-radio-group>
                <p v-if="showAnswer">
                    <span v-if="item.submitAnswer[0] === item.answer[0]" style="color: #409eff">正确</span>
                    <span v-else style="color: red">回答错误，正确答案：{{ item.answer[0] }}</span>
                </p>
            </template>
            <template v-else-if="item.type === '多选题'">
                <p class="card-item-title">{{ item.question }}</p>
                <el-checkbox-group v-model="item.submitAnswer" @change="onChange(item)">
                    <el-checkbox size="large" v-for="(value, key) in item.options" :value="key" :style="style">
                        <span v-if="status === 2 || status === 3">{{ key }}.{{ value }}</span>
                        <span v-else :style="multiSelectStyle(item, String(key))"> {{ key }}.{{ value }} </span>
                    </el-checkbox>
                </el-checkbox-group>
                <p v-if="showAnswer">
                    <span v-if="isEqualAnswer(item.submitAnswer, item.answer)" style="color: #409eff">正确</span>
                    <span v-else style="color: red">回答错误，正确答案：{{ item.answer.join("、") }}</span>
                </p>
            </template>
            <template v-else-if="item.type === '判断题'">
                <p class="card-item-title">{{ item.question }}</p>
                <el-radio-group v-model="item.submitAnswer[0]" @change="onChange(item)">
                    <el-radio :value="key" size="large" v-for="(value, key) in item.options" :style="style">
                        <span v-if="status === 2 || status === 3">{{ value }}</span>
                        <span v-else :style="judgeStyle(item, String(key))">{{ value }} </span>
                    </el-radio>
                </el-radio-group>
                <p v-if="showAnswer">
                    <span v-if="item.submitAnswer[0] === item.answer[0]" style="color: #409eff">正确</span>
                    <span v-else style="color: red">回答错误</span>
                </p>
            </template>
            <template v-else-if="item.type === '填空题'">
                <paper-question-fill-blank :question="item.question" :answer="item.submitAnswer" :readonly="status !== 2" @on-change="(value:any) => onChange({rowIndex: item.rowIndex, submitAnswer: value.value })" />
                <p v-if="showAnswer">
                    <span v-if="isEqualAnswer(item.submitAnswer, item.answer)" style="color: #409eff">正确</span>
                    <span v-else style="color: red">回答错误，正确答案：{{ item.answer.join("、") }}</span>
                </p>
            </template>
            <template v-else-if="item.type === '问答题'">
                <p class="card-item-title">{{ item.question }}</p>
                <el-input v-model="item.submitAnswer[0]" :autosize="{ minRows: 5, maxRows: 40 }" type="textarea" :style="style" @change="onChange(item)" />
            </template>
            <template #footer v-if="item.analysis && showAnswer"> <span class="card-footer">解析：</span>{{ item.analysis }} </template>
        </el-card>
    </template>
</template>

<script setup lang="ts">
import { inject, computed } from "vue";
import PaperQuestionFillBlank from "@/views/system/components/paper/PaperQuestionFillBlank.vue";

//获取自定义全局方法
const { emitter, authStore } = inject<any>("method");

//父传子
interface Props {
    questionList?: Record<string, any>[];
    status: number | null;
}
const props = withDefaults(defineProps<Props>(), {
    questionList: () => [],
    status: null,
});

//计算样式
const style = computed(() => ({
    width: "100%",
    "pointer-events": props.status === 2 ? "auto" : "none",
}));

//计算展示答案
const showAnswer = computed(() => props.status === 4 || props.status === 5 || props.status === 1);

//计算单选题的样式
const singleSelectStyle = computed(() => (item: any, key: string) => {
    if (item.submitAnswer[0] === item.answer[0]) {
        return {};
    }
    if (item.submitAnswer[0] === key) {
        return { color: "red" };
    }
    if (item.answer[0] === key) {
        return { color: "#409eff" };
    }
    return {};
});

//计算多选题的样式
const multiSelectStyle = computed(() => (item: any, key: string) => {
    if (isEqual(item.submitAnswer, item.answer)) {
        return {};
    }
    if (item.submitAnswer.includes(key) && !item.answer.includes(key)) {
        return { color: "red" };
    }
    if (!item.submitAnswer.includes(key) && item.answer.includes(key)) {
        return { color: "#409eff" };
    }
    return {};
});

//判断两个数组是否一致
const isEqual = (arr1: string[], arr2: string[]) => {
    if (arr1.length != arr2.length) return false;
    return arr1.filter((x) => !arr2.includes(x)).length === 0 && arr2.filter((x) => !arr1.includes(x)).length === 0;
};

//计算答案是否一致
const isEqualAnswer = computed(() => (arr1: string[], arr2: string[]) => {
    if (arr1.length != arr2.length) return false;
    return arr1.filter((x) => !arr2.includes(x)).length === 0 && arr2.filter((x) => !arr1.includes(x)).length === 0;
});

//计算判断题的样式
const judgeStyle = computed(() => (item: any, key: string) => {
    if (item.submitAnswer[0] === item.answer[0]) {
        return {};
    }
    if (item.submitAnswer[0] === key) {
        return { color: "red" };
    }
    if (item.answer[0] === key) {
        return { color: "#409eff" };
    }
    return {};
});

//当值发生变化时触发
const onChange = (item: any) => {
    //保存答案
    authStore.setExamAnswerMap(item.rowIndex, item.submitAnswer);
    //计算进度
    const process = parseFloat(((authStore.examAnswerMap.size / props.questionList.length) * 100).toFixed(2));
    emitter.emit("paper-answer-percentage", process);
};
</script>

<style scoped lang="less">
.card-item {
    margin-top: 10px;
    .card-item-header {
        display: flex;
        justify-content: space-between;
        .card-item-header-first {
            font-weight: 700;
        }
    }
    .card-item-title {
        font-weight: 600;
    }
    .card-footer {
        font-weight: 600;
    }
}
</style>
